<template>
  <div>
    <SearchBar v-model="searchData" />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import SearchBar from '@/components/SearchBar.vue';

const searchData = ref({
  keyword: '',
  select:'',
  placeholder:"请输入搜索内容",
  options:[
    {label:"视频",value:"video"},
    {label:"文章",value:"article"},
    {label:"用户",value:"user"},
  ],
  selectedValue:"video",
  search:function(value){
    console.log("点击搜索按钮")
    console.log(searchData.value.keyword)
    console.log(value)
  }
});
</script>

<style scoped>
.controller {
  width: 80%;
  margin: 1em auto;
}

.result {
 color: #333;
}
.controller input {
  width: 100%;
  height: 2em;
  padding: 0 1em;
  font-size: 1em;
  border: 1px solid #ccc;
  border-radius: 4px;
}

</style>